<template>
  <div class="container">
    <div class="bg">
      <div class="title">
        <el-button type="success" icon="el-icon-edit">新增试题</el-button>
      </div>
      <div class="search">
        <el-form :inline="true" class="demo-form-inline">
          <el-row :gutter="20" justify="end" type="flex">
            <el-col :span="6">
              <el-form-item label="学科">
                <el-select
                  placeholder="请选择活动区域"
                  v-model="user.subjectID"
                  @change="dbtn"
                >
                  <el-option
                    label="无数据"
                    value=""
                    v-if="subject.length == 0"
                    v-model="user.subjectID"
                  ></el-option>
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="(item, index) in subject"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select
                  placeholder="请选择活动区域"
                  v-model="user.catalogID"
                >
                  <el-option
                    label="无数据"
                    value=""
                    v-if="subject.length == 0"
                    v-model="user.subjectID"
                  ></el-option>
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="(item, index) in direction"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签">
                <el-select placeholder="请选择活动区域" v-model="user.tags">
                  <el-option
                    label="无数据"
                    value=""
                    v-if="subject.length == 0"
                    v-model="user.subjectID"
                  ></el-option>
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="(item, index) in tags"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input
                  placeholder="审批人"
                  v-model="user.keyword"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" type="flex" justify="end">
            <el-col :span="6">
              <el-form-item label="试题类型">
                <el-select
                  placeholder="请选择活动区域"
                  v-model="user.questionType"
                >
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="(item, index) in questionType"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度">
                <el-select
                  placeholder="请选择活动区域"
                  v-model="user.difficulty"
                >
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="(item, index) in difficulty"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向">
                <el-select
                  placeholder="请选择活动区域"
                  v-model="user.direction"
                >
                  <el-option
                    :label="item"
                    :value="item"
                    v-for="(item, index) in direction1"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="录入人">
                <el-select
                  placeholder="请选择活动区域"
                  v-model="user.creatorID"
                >
                  <el-option label="超级管理员" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" justify="end" type="flex">
            <el-col :span="6">
              <el-form-item label="题目备注">
                <el-input
                  placeholder="审批人"
                  v-model="user.remarks"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称">
                <el-input
                  placeholder="审批人"
                  v-model="user.shortName"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="城市">
                <el-select
                  placeholder="请选择"
                  style="width: 100px"
                  v-model="user.province"
                >
                  <el-option
                    :label="item"
                    :value="item"
                    v-for="(item, index) in provinces"
                    :key="index"
                  ></el-option>
                </el-select>
                <el-select
                  style="width: 100px; margin-left: 20px"
                  placeholder="请选择"
                  v-model="user.city"
                >
                  <el-option
                    :label="item"
                    :value="item"
                    v-for="(item, index) in Arrcity"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" class="button">
              <el-button size="mini" style="height: 35px" @click="removeBtn"
                >清除</el-button
              >
              <el-button
                type="primary"
                size="mini"
                style="height: 35px"
                @click="addBtn"
                >搜索</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="alert">
         <el-alert :title="`数据一共${counts}条`" type="info" show-icon></el-alert>
      </div>
      <div class="table">
        <el-card>
          <el-table :data="data" stripe style="width: 100%">
            <el-table-column prop="number" label="试题编号" width="120">
            </el-table-column>
            <el-table-column prop="subject" label="学科" width="120">
            </el-table-column>
            <el-table-column prop="catalog" label="目录" width="120">
            </el-table-column>
            <el-table-column prop="address" label="题型" width="120">
              <template slot-scope="{ row }">
                <span>
                  {{ getDiffculty(row.questionType) }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="题干" width="160">
              <template slot-scope="{ row }">
                <div v-html="row.question"></div>
              </template>
            </el-table-column>
            <el-table-column prop="addDate" label="录入时间" width="160">
              <template slot-scope="{ row }">
                <div>
                  {{ row.addDate | parseTimeByString }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="难度" width="80">
              <template slot-scope="{ row }">
                <span>
                  {{ getDocument(row.difficulty) }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="creator"
              label="录入人"
              width="80"
            ></el-table-column>
            <el-table-column prop="address" label="操作" width="180">
              <template slot-scope="{ row }">
                <div>
                  <el-button
                    type="primary"
                    @click="chakan(row)"
                    icon="el-icon-view"
                    circle
                    size="mini"
                  ></el-button>
                  <el-button
                    type="success"
                    icon="el-icon-edit"
                    circle
                    size="mini"
                  ></el-button>
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    circle
                    size="mini"
                    @click="remove(row)"
                  ></el-button>
                  <el-button
                    type="warning"
                    icon="el-icon-check"
                    circle
                    size="mini"
                  ></el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="fenye">
            <el-pagination
              :total="counts"
              layout="prev,pager,next,sizes,jumper"
              @next-click="nextPage"
              @prev-click='prevPage'
              @size-change='change'
              @current-change='current'
            >
            </el-pagination>
          </div>
        </el-card>
      </div>
    </div>
    <el-dialog
        title="题目预览"
        :visible.sync="dialogVisible"
        width="80%"
        height='80%'
        v-if="dialogVisible"
      >
        <questionsCheck :data='row'/>
      </el-dialog>
  </div>
</template>

<script>
import { simpleApi } from "@/api/hmmm/subjects.js";
import { simple1 } from "@/api/hmmm/directorys.js";
import { simple2 } from "@/api/hmmm/tags.js";
import { provinces, citys } from "@/api/hmmm/citys.js";
import { questionType, difficulty, direction } from "@/api/hmmm/constants.js";
import { list } from "@/api/hmmm/questions.js";
import { remove } from "@/api/hmmm/questions.js";
import questionsCheck from "@/module-hmmm/components/questions-check";
export default {
  data() {
    return {
      user: {
        // subjectID: "",
        // difficulty: "",
        // questionType: "",
        // tags: "",
        // province: "",
        // city: "",
        // keyword: "",
        // remarks: "",
        // shortName: "",
        // direction: "",
        page: 1,
        pagesize: 5,
        // catalogID: "",
        // creatorID: "",
      },
      subject: "",
      tags: [],
      direction: [],
      questionType: [],
      difficulty: [],
      direction1: [],
      provinces: [],
      data: [],
      counts: "",
      dialogVisible:false,
      row:{}
    };
  },
  async created() {
    this.getDate();
    const res = await simpleApi();
    this.subject = res.data;
    this.questionType = questionType;
    this.difficulty = difficulty;
    this.direction1 = direction;
    this.provinces = provinces();
  },
  components: {
    questionsCheck,
  },
  computed: {
    Arrcity() {
      return citys(this.user.province);
    },
  },
  methods: {
    async dbtn() {
      const res = await simple1(this.user.subjectID);
      const res2 = await simple2(this.user.subjectID);
      this.tags = res2.data;
      this.direction = res.data;
    },
    removeBtn() {
      this.user = {};
    },
    addBtn() {
      console.log(this.user);
      this.getDate();
    },
    async getDate() {
      let res = await list(this.user);
      console.log('1122',res);
      this.data = res.data.items;
      this.counts = res.data.counts;
      this.pages=res.data.pages
    },
    getDiffculty(item1) {
      questionType.forEach((item) => {
        if (item.value == item1) {
          item1 = item.label;
        }
      });
      return item1;
    },
    getDocument(item1) {
      difficulty.forEach((item) => {
        if (item.value == item1) {
          item1 = item.label;
        }
      });
      return item1;
    },
    remove(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res2 = await remove(row);
          console.log(res2);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getDate();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
     nextPage(){
      this.user.page++
      this.getDate()
    },
    prevPage(){
      this.user.page--
      this.getDate()
    },
    change(res){
      this.user.pagesize=res
      this.getDate()
    },
    current(res){
      this.user.page=res
      this.getDate()
    },
    chakan(row){
      this.row=row
      this.dialogVisible=true
    }
  },
};
</script>

<style scoped lang='less'>
.container {
  padding: 10px;
  .bg {
    background: #ffffff;
    padding: 20px;
    height: 800px;
    .title {
      height: 40px;
      width: 100%;
      display: flex;
      justify-content: end;
    }
    .search {
      width: 100%;
      height: 150px;
      margin-top: 15px;
    }
    .button {
      display: flex;
      justify-content: end;
      font-size: 8px;
    }
  }
  .alert {
    margin-top: 30px;
    height: 30px;
  }
  .table {
    margin-top: 30px;
    height: 500px;
  }
  .fenye {
    margin-top: 10px;
    display: flex;
    justify-content: end;
  }
}
</style>
